<template>
  <div class="index-container">
    <remote-js src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></remote-js>
    <div style="padding: 15px">
      <div class="title_box">
        <h3>{{ list.title }}</h3>
        <div class="source_addtime">
          <span class="laiyuan">来源：{{ list.source }}</span>
          <span class="tp_box">
            <i class="news_wz" />
            <i class="news_fd" @click="newsFD()" />
            <i class="news_sx" @click="newsSX()" />
            <i style="width: 1px; background: #f0f0f0"></i>
            <i @click="favClick(list)" :class="list.is_fav ? 'news_collect_on' : 'news_collect'" />
          </span>
        </div>
      </div>
      <div
        class="content_box"
        :style="`font-size:${postFontSize}px;height:${height};overflow:hidden;`"
        v-html="list.content"
      ></div>
      <van-button class="unfold" @click="handleUnfold()">展开阅读全文</van-button>
      <van-button class="open-app" @click="handleOpenApp()">打开APP看资讯</van-button>
    </div>

    <van-popup v-model="show">
      <h3>前往王派医学APP查看, 体验更佳！</h3>
      <div class="button-box">
        <van-button @click="show = false">取 消</van-button>
        <van-button>前 往</van-button>
      </div>
    </van-popup>

    <van-divider />

    <!-- 热门推荐 -->
    <div class="hot_news">
      <div class="headline">
        <span class="h_left">
          <i>热门推荐</i>
        </span>
      </div>
      <div v-if="foot_banner && foot_banner.length > 0" class="banner">
        <van-swipe :autoplay="3000" lazy-render>
          <van-swipe-item v-for="(item, index) in foot_banner" :key="index">
            <img :src="item.image" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <ul>
        <li v-for="(item, index) in news" :key="index">
          <van-icon :name="require('@/assets/images/home_hot_news.png')" />
          {{ item.title }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { Dialog } from 'vant'
import { parseFav } from '@/utils/status/user'
import { detailFind, favNews } from '@/api/news/index'
import moment from 'moment'
export default {
  components: {
    'remote-js': {
      render(createElement) {
        return createElement('script', { attrs: { type: 'text/javascript', src: this.src } })
      },
      props: {
        src: { type: String, required: true }
      }
    }
  },
  data() {
    return {
      queryParams: {
        news_id: null,
        subject_id: null
      },
      list: {},
      news: {},
      foot_banner: {},
      postFontSize: 12,
      height: 'calc(50vh)',
      show: false
    }
  },

  computed: {},
  created() {
    document.title = '资讯详情'
  },
  mounted() {
    // if (this.$route.query.access_token) {
    //   let data = {
    //     access_token: this.$route.query.access_token,
    //     no: this.$route.query.no,
    //     member_type: 'member'
    //   }
    //   this.$store.dispatch('user/appLogin', data).then(res => { })
    // }
    this.queryParams.news_id = this.$route.query.id
    this.queryParams.subject_id = this.$route.query.subject_id
    this.fetchList()
  },

  methods: {
    fetchList() {
      detailFind(this.queryParams).then(res => {
        this.list = res.data.info
        this.news = res.data.news
        this.foot_banner = res.data.foot_banner
        this.list.addtime = moment(this.list.addtime * 1000).format(' YYYY-MM-DD')
      })
    },
    // 资讯文字放大
    newsFD() {
      this.postFontSize++
    },
    // 资讯文字缩小
    newsSX() {
      this.postFontSize--
    },
    // 收藏
    favClick(row) {
      const { action, result, actionTip } = parseFav(row.is_fav)
      this.list.is_fav = result
      const data = {
        news_id: row.id,
        action: action
      }
      favNews(data).then(res => {
        this.list.is_fav = result
        Toast({
          message: actionTip
        })
      })
      //   .catch(() => {
      //     var ua = navigator.userAgent.toLowerCase()
      //     if (ua.match(/MicroMessenger/i) == 'micromessenger') {
      //       //ios的ua中无miniProgram，但都有MicroMessenger（表示是微信浏览器）
      //       wx.miniProgram.getEnv(res => {
      //         if (res.miniprogram) {
      //           //微信小程序环境
      //           Dialog.confirm({
      //             title: '温馨提示',
      //             message: '您还未登录，请先登录'
      //           })
      //             .then(() => {
      //               wx.miniProgram.navigateTo({
      //                 url: '/pages/login/login'
      //                 //url: '/pages/content/content?id=1', 传参
      //               })
      //               // wx.miniProgram.switchTab({url: "/pages/index/index"}) //跳转底部tab页
      //             })
      //             .catch(() => {
      //               // on cancel
      //             })
      //         } else {
      //           //微信小程序环境
      //         }
      //       })
      //     }
      //   })
    },
    handleUnfold() {
      this.height = '100%'
    },
    handleOpenApp() {
      this.show = true
    }
  }
}
</script>

<style lang="scss" scoped>
.index-container {
  background: #ffffff;
  padding-bottom: 30px;
  .bottom_left {
    position: fixed;
    right: 15px;
    bottom: 50px;
    text-align: center;
    line-height: 14px;
    img {
      width: 48px;
      height: 48px;
    }
    .shouc {
      font-size: 14px;
      color: #666666;
    }
  }
  .title_box {
    // padding: 15px;
    border-bottom: 1px solid #f1f1f1;
    h3 {
      font-size: 15px;
      font-weight: 600;
      color: #333333;
      line-height: 21px;
    }
  }
  .source_addtime {
    height: 30px;
    color: #999999;
    .laiyuan {
      font-size: 12px;
      font-weight: 400;
      color: #009697;
      line-height: 20px;
    }
  }
  .tp_box {
    float: right;
    i {
      display: inline-block;
      position: relative;
      top: 2px;
      width: 20px;
      height: 20px;
      margin-right: 5px;
      margin-left: 5px;
      cursor: pointer;
    }

    .news_collect {
      background: url(@/assets/images/news_collect.png) no-repeat center center;
      background-size: 100% 100%;
    }
    .news_collect_on,
    .news_sj_sc .sc:hover .news_collect {
      background: url(@/assets/images/news_collect_active.png) no-repeat center center;
      background-size: 100% 100%;
    }
    .news_wz {
      width: 41px !important;
      height: 20px !important;
      background: url(@/assets/images/news_wz.png) no-repeat center center;
      background-size: 100% 100%;
    }
    .news_fd {
      background: url(@/assets/images/news_fd.png) no-repeat center center;
      background-size: 100% 100%;
    }
    .news_fd_on,
    .news_fd:hover {
      background: url(@/assets/images/news_fd_on.png) no-repeat center center;
      background-size: 100% 100%;
    }
    .news_sx {
      background: url(@/assets/images/news_sx.png) no-repeat center center;
      background-size: 100% 100%;
    }
    .news_sx_on,
    .news_sx:hover {
      background: url(@/assets/images/news_sx_on.png) no-repeat center center;
      background-size: 100% 100%;
    }
  }

  .unfold {
    margin-top: 40px;
    width: 100%;
    height: 45px;
    font-size: 14px;
    color: #666666;
    font-weight: 600;
    background: #fafafa;
    border: 0.5px solid #e7e7e7;
    border-radius: 22px;
  }
  .open-app {
    margin-top: 10px;
    width: 100%;
    height: 45px;
    font-size: 14px;
    color: #ffffff;
    font-weight: 600;
    background: #009697;
    border: 0.5px solid #009697;
    border-radius: 22px;
  }

  ::v-deep .content_box {
    font-size: 12px;
    margin-top: 10px;
    // margin: 10px;
    img {
      width: 100%;
      height: 100%;
    }
  }

  .hot_news {
    .banner {
      .van-swipe {
        height: 62px;
        margin: 10px 15px;
        border-radius: 5px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    ul {
      margin: 0 35px 0 15px;
      li {
        .van-icon {
          font-size: 8px;
          margin-right: 10px;
        }
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        line-height: 37px;
        @include textoverflow();
      }
    }
  }

  .van-popup {
    width: 90%;
    height: 208px;
    background: #ffffff;
    border-radius: 10px;
    h3 {
      margin-top: 50px;
      text-align: center;
      font-size: 16px;
      font-weight: 400;
      color: #333333;
      line-height: 30px;
    }
    .button-box {
      margin-top: 50px;
      display: flex;
      justify-content: space-around;
    }
    .van-button {
      width: 130px;
      height: 45px;
      font-size: 16px;
      font-weight: 400;
      color: #666666;
      background: #fafafa;
      border: 0.5px solid #e7e7e7;
      border-radius: 23px;
    }
    .van-button:nth-child(2) {
      color: #ffffff;
      background: #009697;
    }
  }
}
</style>
